<template>
    <div>
        <Card>
            <span slot="title">添加账号</span>
            <div slot="content">
                <el-form ref="addForm" :rules="rules" :model="addForm" label-width="80px">
                    <el-form-item label="账号" prop="account">
                        <el-input v-model="addForm.account"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="addForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="用户组" prop="userGroup">
                        <el-select v-model="addForm.userGroup" placeholder="请选择用户组" prop="userGroup">
                            <el-option label="超级管理员" value="超级管理员"></el-option>
                            <el-option label="普通管理员" value="普通管理员"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit(addForm)">添加</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>                
            </div>
        </Card>
    </div>
</template>

<script>
import Card from "@/components/Card.vue";
import { ACC_REG, PWD_REG } from "@/utilis/reg.js";
import {addAcc} from "@/apis/acc.js"
import local from '@/utilis/local.js'
export default {
    components: {
        Card
    },
    data() {
        const regAcc = (rule, value, callback) => {
            if (!value) {
                callback(new Error("输入不能为空"));
            } else if (!ACC_REG.test(value)) {
                callback(new Error("请输入3-15位账号"));
            } else {
                callback();
            }
        };
        const regPwd = (rule, value, callback) => {
            if (!value) {
                callback(new Error("输入不能为空"));
            } else if (!PWD_REG.test(value)) {
                callback(new Error("请输入3-15位密码"));
            } else {
                callback();
            }
        };
        return {
            addForm: {
                account: "",
                password: "",
                userGroup: ""
            },
            rules: {
                account: {
                    validator: regAcc,
                    trigger: "blur"
                },
                password: {
                    validator: regPwd,
                    trigger: "blur"
                },
                userGroup: {
                    required: true,
                    trigger: "changge",
                    message:"请填写用户组"
                }
            }
        };
    },
    methods: {

        // 重置按钮
        resetForm() {
            this.$refs.addForm.resetFields();
        },
        // 提交按钮
        onSubmit() {
            this.$refs.addForm.validate(async valid => {
                if (valid) {
                let { code } = await addAcc(this.addForm);
                    if(code == 0){
                        this.$router.push("/acc/acc-list");
                    }
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.el-form {
    /deep/.el-input {
        width: 280px;
    }
}
</style>